<template>
    <Header :user="user"/>
    <div class="order_big_div">
        <div style="width: 1200px">
            <el-table :data="order" border style="width: 100%;" stripe>
                <el-table-column prop="id" label="ID" sortable="true"/>
                <el-table-column prop="created" label="创建订单时间" width="200px"/>
                <el-table-column prop="orders" label="商品信息">
                    <template #default="scope">
                        <div v-html="scope.row.orders"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="sumPrice" label="总价"/>
                <el-table-column prop="remark" label="备注"/>
                <el-table-column fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.id, index)">
                            <template #reference>
                                <el-button size="mini" type="danger">删除订单</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="goOrder">
            <el-pagination
                style="position: absolute;margin-top: 10px"
                v-model:currentPage="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[5, 10, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleSizeChange"
            />
            <el-button type="primary" class="order_but" style="margin: 10px 10px 0 0" @click="billPlease">去结账</el-button>
        </div>
    </div>
</template>

<script>
import Header from '@/components/Header'
import '@/assets/css/order.css'
import request from "@/utils/request";

export default {
    name: "Order",
    components: {
        Header,
    },
    data() {
        return {
            user: {},
            order: [],
            token: "",
            currentPage: 1,
            pageSize: 5,
            total: 10,
        }
    },
    created() {
        //获取用户
        this.getUser();
        //加载数据
        this.handleSizeChange();
    },
    methods: {
        handleSizeChange() {
            request.get("/addOrder", {
                params: {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    token: this.token
                }
            }).then(res => {
                if (res.pageBean != null) {
                    this.currentPage = res.pageBean.pageNo;
                    this.total = res.pageBean.dataCount;
                    this.order = res.pageBean.dataList;
                }
            })
        },
        handleDelete(id, index) {
            request.post("/deleteOrder", id).then(res => {
                if (res.message === "成功") {
                    this.$message({
                        type: "success",
                        message: "再见，我会想你的"
                    })
                    for (let i = 0; i < this.order.length; i++) {
                        if (this.order[i].id === id) {
                            this.order.splice(i, 1);
                            return ;
                        }
                    }
                } else {
                    this.$message({
                        type: "error",
                        message: "不好意思，你没删掉我"
                    })
                }
            })
        },
        getUser() {
            if (localStorage.getItem("access-user") != null) {
                this.user = JSON.parse(localStorage.getItem("access-user")).user;
                this.token = JSON.parse(localStorage.getItem("access-user")).token;
            } else {
                this.user = {};
            }
            request.get("/checkToken", {
                headers: {
                    token: this.token
                }
            }).then(res => {
                if (!res) {
                    this.$message({
                        type: "error",
                        message: "登录信息已过期，请重新登录"
                    })
                    this.$router.push("/");
                } else {
                    this.user = JSON.parse(localStorage.getItem("access-user")).user;
                }
            })
        },
    }
}
</script>

<style scoped>

</style>